li {
  list-style: none;
}

#recommend /deep/ .el-pager li.active {
  background-color: rgb(255, 165, 0);
}

#recommend /deep/ .el-pager li:hover {
  color: rgb(255, 165, 0);
}

.hotGedan {
  padding-top: 10px;
  background-image: linear-gradient(#e6e6e6, #fff);
  /* 默认方向自下向上 */
}

.hotGedan h2,
.choose {
  margin-top: 20px;
  text-align: center;
}

.hotGedan h2 {
  color: rgb(255, 165, 0);

}

.choose {
  margin-bottom: 20px;
}

.choose span {
  cursor: pointer;
  display: inline-block;
  width: 80px;
}

.choose span:hover {
  color: rgb(255, 165, 0);
}

.hotGedan .content {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
}

.sort {
  transition: all 0.5s;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.sort li {
  list-style: none;
}

/* .hotGedan .content .sort li {
  width: 236px;
  height: 236px;  
  overflow: hidden;
} */

.hotGedan .content .sort img {
  /* transition: all 1s; */
  overflow: hidden;
  width: 236px;
  height: 236px;
}

.hotGedan .sort .img .run,
.newSing .content .run {
  transition: all 1s;
  position: absolute;
  top: 0;
  width: 236px;
  height: 236px;
  background: rgba(0, 0, 0, 0.5) url("../assets/play.png") no-repeat;
  background-position: center center;
  background-size: 50px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  opacity: 0;
}

.hotGedan .content .name {
  padding: 5px 0;
  font-size: 15px;
  width: 236px;
  overflow: hidden;
}

.hotGedan .content .count,
.hotGedan .content .share {
  font-size: 14px;
  color: #cdcdcd;
}

.hotGedan .content .share {
  margin-top: 5px;
}

.left,
.right {
  width: 80px;
  height: 80px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
}

.left img,
.right img {
  width: 80%;
  height: 95%;
  text-align: center;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.left-fade-enter-active {
  transition: all 0.3s ease;
}

.left-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.left-fade-enter,
.left-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  opacity: 0;
}

.right-fade-enter-active {
  transition: all 0.3s ease;
}

.right-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.right-fade-enter,
.right-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  opacity: 0;
}

.circle {
  position: absolute;
  bottom: -40px;
}

.circle ul li {
  float: left;
  width: 40px;
  cursor: pointer;
}

#newMusic {
  background-image: linear-gradient(#e6e6e6, #fff);
}

#newMusic h2 {
  color: rgb(255, 165, 0);
  text-align: center;
  padding: 20px 0;
}

#newMusic .content {
  margin: 20px auto;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#newMusic .item {
  position: relative;
  width: 350px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#newMusic .item .run {
  transition: all .3s;
  position: absolute;
  width: 100px;
  height: 100px;
  background: url("../assets/play.png") no-repeat;
  background-color: rgba(0, 0, 0, .3);
  background-position: center center;
  background-size: 30px;
}

#newMusic .item .run img {
  width: 30px;
  height: 30px;
  margin: 35px;
}

#newMusic .item .img img {
  width: 100px;
  height: 100px;
}

#newMusic .item .info {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}


#newMusic .item .name {
  cursor: pointer;
  margin-bottom: 5px;
}

#newMusic .item .info:hover {
  color: rgb(255, 165, 0);
}

.all-fade-enter-active,
.all-fade-leave-active {
  transition: opacity .6s
}

.all-fade-enter,
.all-fade-leave-active {
  opacity: 0
}



#newMusic .info .name span:last-child {
  color: #515151;
}

#newMusic .info .artName {
  color: #cdcdcd;
}

#newMusic .artName {
  display: flex;
  flex-wrap: wrap;
}

#newMusic .artName span {
  display: inline-block;
}

.newSing {
  position: relative;
  width: 100%;
  background-image: linear-gradient(#e6e6e6, #fff);
}

.newSing h2 {
  text-align: center;
  padding: 25px 0;
  color: rgb(255, 165, 0);
}

.newSing .content {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.newSing .item {
  position: relative;
}

.newSing .content .img {
  width: 236px;
  height: 236px;
}

.newSing .content .img img {
  width: 100%;
  height: 100%;
}

.newSing .content .name {
  width: 236px;
  overflow: hidden;
  margin: 5px 0;
}

.newSing .content .artName {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
}

.newSing .left,
.newSing .right {
  top: 50%;
  margin-top: -40px;
}

.sing-left-fade-enter-active {
  transition: all 0.3s ease;
}

.sing-left-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.sing-left-fade-enter,
.sing-left-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  opacity: 0;
}

.sing-right-fade-enter-active {
  transition: all 0.3s ease;
}

.sing-right-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.sing-right-fade-enter,
.sing-right-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  opacity: 0;
}

#rank {
  margin: 20px 0;
  background-image: linear-gradient(#e6e6e6, #fff);
}

#rank h2 {
  padding: 20px;
  text-align: center;
  color: rgb(255, 165, 0);
}

#rank .content {
  display: flex;
}

#rank ul {
  display: flex;
  justify-content: space-around;
}

#rank ul li {
  width: 220px;
  height: 470px;
}

.des .singName {
  cursor: pointer;
  transition: all 1s;
  width: 200px;
  overflow: hidden;
}

.des .singName:hover {
  color: rgb(255, 165, 0);
}

#rank ul li:first-child {
  background: url("../assets/rank.jpg");
}

#rank ul li:nth-child(2) {
  background: url("../assets/rank.jpg");
  background-position: -225px 0;
}

#rank ul li:nth-child(3) {
  background: url("../assets/rank.jpg");
  background-position: -450px 0;
}

#rank ul li:nth-child(4) {
  background: url("../assets/rank.jpg");
  background-position: -675px 0;
}


#rank ul li:nth-child(5) {
  background: url("../assets/rank.jpg");
  background-position: -900px 0;
}

.rankName {
  font-size: 20px;
  color: white;
  text-align: center;
  margin: 20px 0;
}

#rank .content li {
  position: relative;
}

#rank .rank {
  transition: all 0.5s;
  width: 180px;
  margin: 10px auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.contItem {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.contItem .num {
  margin-right: 20px;
}


.contItem:first-child .num {
  color: #FF4500;
}

.contItem:nth-child(2) .num {
  color: #CD5C5C;
}

.contItem:nth-child(3) .num {
  color: #F08080;
}

.contItem:nth-child(4) .num,
.contItem:nth-child(5) .num {
  color: white;
}

.content .des {
  transition: all 1s;
  width: 110px;
}

.contItem .des .singName {
  width: 100px;
  margin-bottom: 5px;
  color: white;
}

.contItem .des .name {
  font-size: 14px;
  color: #cdcdcd;
}

.more {
  position: absolute;
  font-size: 12px;
  color: white;
  width: 60px;
  right: 20px;
  bottom: 10px;
}

.contItem .play {
  width: 30px;
  height: 30px;
}

.content .play img {
  width: 100%;
  height: 100%;
}
